<template>
    <div class="container">
      <div class="controls">
        <button @click="toggleView">切换视图（平面图/斜二侧图）</button>
        <label for="riserHeight">立管高度：</label>
        <input type="number" id="riserHeight" v-model.number="riserHeight" />
      </div>
      <canvas ref="canvas" width="600" height="400"></canvas>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  
  interface Riser {
    x: number
    y: number
    diameter: number
    z: number
    z1: number
  }
  
  interface Pipe {
    x1: number
    y1: number
    x2: number
    y2: number
  }
  
  interface Vertical {
    x: number
    y: number
    x2: number
    y2: number
  }
  
  // 响应式数据
  const canvas = ref<HTMLCanvasElement | null>(null)
  const isometric = ref(false)
  const riserHeight = ref(100)
  
  // 原始管道数据
  const originalPipes = {
    risers: [
      { x: 100, y: 100, diameter: 10, z:0, z1:100 },
      { x: 100, y: 250, diameter: 10, z:0, z1:100},
      { x: 250, y: 170, diameter: 10, z:0, z1:100 },
    ] as Riser[],
    pipes: [
      { x1: 100, y1: 100, x2: 200, y2: 100 },
      { x1: 100, y1: 250, x2: 200, y2: 250 },
      { x1: 200, y1: 150, x2: 300, y2: 150 },
      { x1: 300, y1: 350, x2: 100, y2: 350 },
      { x1: 300, y1: 350, x2: 100, y2: 350 },
      { x1: 300, y1: 200, x2: 250, y2: 200 },
      { x1: 300, y1: 200, x2: 350, y2: 200 },
      { x1: 360, y1: 100, x2: 360, y2: 260 },
    ] as Pipe[],
    verticals: [
      { x: 200, y: 100,x2: 200, y2: 250 },
      { x: 300, y: 150,x2: 300, y2: 350 },
    //   { x: 300, y: 150, x2: 350, y2: 100 },
      { x: 250, y: 200,x2: 250, y2: 170 },
      { x: 350, y: 200,x2: 360, y2: 210 },
    ] as Vertical[]
  }
  
  // 斜二侧投影计算
  const obliqueProject = (x: number, y: number) => {
    const angle = Math.PI / 4
    const scaleY = 0.5
    return {
      x: x - y * scaleY * Math.sin(angle) +50,
      y: y * scaleY * Math.cos(angle) + 50
    }
  }
  
  // 切换视图
  const toggleView = () => {
    isometric.value = !isometric.value
  }
  
  // 绘制函数
  const draw = () => {
    if (!canvas.value) return
    const ctx = canvas.value.getContext('2d')
    if (!ctx) return
  
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
  
    // 绘制立管
    originalPipes.risers.forEach(riser => {
      const proj = isometric.value ? obliqueProject(riser.x, riser.y) : { x: riser.x, y: riser.y }
      
      ctx.beginPath()
      ctx.arc(proj.x, proj.y, riser.diameter / 2, 0, Math.PI * 2)
      ctx.fillStyle = '#FF0000'
      ctx.fill()
  
      if (isometric.value) {
        const angle = Math.PI / 4
        const dx = riserHeight.value * Math.cos(angle)
        const dy = riserHeight.value * Math.sin(angle)
        const top = { x: proj.x, y: proj.y + dy }
        
        ctx.beginPath()
        ctx.moveTo(proj.x, proj.y)
        ctx.lineTo(top.x, top.y)
        ctx.strokeStyle = '#000000'
        ctx.lineWidth = 2
        ctx.stroke()
      }
    })
  
    // 绘制横管
    originalPipes.pipes.forEach(pipe => {
      const p1 = isometric.value ? obliqueProject(pipe.x1, pipe.y1) : { x: pipe.x1, y: pipe.y1 }
      const p2 = isometric.value ? obliqueProject(pipe.x2, pipe.y2) : { x: pipe.x2, y: pipe.y2 }
      
      ctx.beginPath()
      ctx.moveTo(p1.x, p1.y)
      ctx.lineTo(p2.x, p2.y)
      ctx.strokeStyle = '#0000FF'
      ctx.lineWidth = 2
      ctx.stroke()
    })
  
    // 绘制垂直线段
    originalPipes.verticals.forEach(vertical => {
      const start = isometric.value ? obliqueProject(vertical.x, vertical.y) : { x: vertical.x, y: vertical.y }
      const end = isometric.value ? obliqueProject(vertical.x2, vertical.y2) : { x: vertical.x2, y: vertical.y2 }
      
      ctx.beginPath()
      ctx.moveTo(start.x, start.y)
      ctx.lineTo(end.x, end.y)
      ctx.strokeStyle = '#00FF00'
      ctx.lineWidth = 2
      ctx.stroke()
    })
  
    // 绘制文字说明
    ctx.fillStyle = '#000'
    ctx.font = '14px Arial'
    ctx.fillText(`当前视图: ${isometric.value ? '斜二侧图' : '平面图'}`, 10, 20)
  }
  
  // 监听相关变化
  watch([isometric, riserHeight], draw)
  
  // 初始化绘制
  onMounted(draw)
  </script>
  
  <style scoped>
  .container {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  
  canvas {
    border: 1px solid #000;
    margin-top: 10px;
  }
  
  .controls {
    margin-bottom: 10px;
  }
  
  button {
    margin-right: 10px;
    padding: 5px 10px;
  }
  
  input {
    padding: 5px;
    width: 100px;
  }
  </style>